<template>
  <div>
    <el-table
      :data="tableData.filter(data => !search
      || data.name.toLowerCase().includes(search.toLowerCase())
      || data.date.toLowerCase().includes(search.toLowerCase()))"
      height="600"
      style="width: 100%">
      <el-table-column>
        <el-table-column label="" prop="id" align="center" width="40"></el-table-column>
        <el-table-column label="商品编码" prop="code"  width="80"></el-table-column>
        <el-table-column label="商品名称" prop="name" width="160" header-align="center"></el-table-column>
        <el-table-column label="商品型号" prop="model" width="80"></el-table-column>
        <el-table-column label="类别" prop="typeName" width="80"></el-table-column>
        <el-table-column label="单位" prop="unit" width="50"></el-table-column>
        <el-table-column label="采购价" prop="purchasingPrice" width="80"></el-table-column>
        <el-table-column label="销售价" prop="sellingPrice" width="80"></el-table-column>
        <el-table-column label="当前库存" prop="nowNum" width="80"></el-table-column>
        <el-table-column label="库存下限" prop="minNum" width="80"> </el-table-column>
        <el-table-column label="生产厂商" prop="producer" header-align="center"></el-table-column>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [{
        id:'1',
        code: '0001',
        name: '劲仔小鱼干',
        model: '250g装',
        typeName:'休闲食品',
        util:'袋',
        purchasingPrice:'￥12',
        sellingPrice:'￥20',
        nowNum:'20',
        minNum:'300',
        producer:'湖南省华文食品有限公司'
      },
      {
        id:'2',
        code: '0002',
        name: '劲仔小鱼干',
        model: '250g装',
        typeName:'休闲食品',
        util:'袋',
        purchasingPrice:'￥12',
        sellingPrice:'￥20',
        nowNum:'20',
        minNum:'300',
        producer:'湖南省华文食品有限公司'
      },
        {
          id:'3',
          code: '0003',
          name: '劲仔小鱼干',
          model: '250g装',
          typeName:'休闲食品',
          util:'袋',
          purchasingPrice:'￥12',
          sellingPrice:'￥20',
          nowNum:'20',
          minNum:'300',
          producer:'湖南省华文食品有限公司'
        },
        {
          id:'4',
          code: '0004',
          name: '劲仔小鱼干',
          model: '250g装',
          typeName:'休闲食品',
          util:'袋',
          purchasingPrice:'￥12',
          sellingPrice:'￥20',
          nowNum:'20',
          minNum:'300',
          producer:'湖南省华文食品有限公司'
        },
        {
          id:'5',
          code: '0005',
          name: '劲仔小鱼干',
          model: '250g装',
          typeName:'休闲食品',
          util:'袋',
          purchasingPrice:'￥12',
          sellingPrice:'￥20',
          nowNum:'20',
          minNum:'300',
          producer:'湖南省华文食品有限公司'
        },
        {
          id:'6',
          code: '0006',
          name: '劲仔小鱼干',
          model: '250g装',
          typeName:'休闲食品',
          util:'袋',
          purchasingPrice:'￥12',
          sellingPrice:'￥20',
          nowNum:'20',
          minNum:'300',
          producer:'湖南省华文食品有限公司'
        },
        {
          id:'7',
          code: '0007',
          name: '劲仔小鱼干',
          model: '250g装',
          typeName:'休闲食品',
          util:'袋',
          purchasingPrice:'￥12',
          sellingPrice:'￥20',
          nowNum:'20',
          minNum:'300',
          producer:'湖南省华文食品有限公司'
        }],
      search: '',
      supplierListOptions: [],
      ruleForm: {
        supplierId: null,
        payable: 0,
        paid: 0,
        date: '',
        remarks: '',
        isPaid: null
      },
      rules: {
        supplierId: [
          {type: 'number', required: true, message: '请选择品牌', trigger: 'blur'},
        ],
        payable: [
          {required: true, message: '请输入应付金额', trigger: 'blur'},
        ],
        paid: [
          {required: true, message: '请输入实付金额', trigger: 'blur'},
        ],
        date: [
          {type: 'date', required: true, message: '请输入日期', trigger: 'blur'},
        ],
        remarks: [
          {message: '请输入备注', trigger: 'blur'},
        ],
        isPaid: [
          {type: 'number', required: true, message: '请选择是否付款', trigger: 'blur'},
        ]
      }
    };
  },
  methods: {
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    loadLocalRuleForm() {
      let localRuleFormString = localStorage.getItem('ruleForm');
      if (localRuleFormString) {
        let localRuleForm = JSON.parse(localRuleFormString);
        if (localRuleForm.brandId) {
          this.ruleForm = localRuleForm;
        } else {
          this.ruleForm.categoryId = localRuleForm.categoryId;
          this.ruleForm.categoryName = localRuleForm.categoryName;
        }
      }
    },
    backToPreStep() {
      this.$router.push('spu-add-new');
    },
    loadBrandList() {
      let url = 'http://localhost:9080/brands';
      console.log('url = ' + url);
      this.axios
        .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
        .get(url).then((response) => {
        let responseBody = response.data;
        if (responseBody.state == 20000) {
          this.brandListOptions = responseBody.data;
        } else {
          this.$message.error(responseBody.message);
        }
      });
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log(this.ruleForm)
          /*let url = 'http://localhost:9080/brands/' + this.ruleForm.brandId;
          console.log('url = ' + url);
          this.axios
            .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
            .get(url).then((response) => {
            let responseBody = response.data;
            if (responseBody.state == 20000) {
              this.ruleForm.brandName = responseBody.data.name;
              let ruleFormString = JSON.stringify(this.ruleForm);
              console.log('ruleFormString >>> ' + ruleFormString);
              localStorage.setItem('ruleForm', ruleFormString);
              this.$router.push('spu-add-new3');
            } else {
              this.$message.error(responseBody.message);
            }
          });*/
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  },
  mounted() {
    /*this.loadBrandList();
    this.loadLocalRuleForm();*/
  }
}
</script>
